<template>
    <div class="password">
        <div class="head">
            <div @click="$router.go(-1)">
                <img src="../../assets/images/fanhui.png" alt="">
            </div>
            <span>手机号登录</span>
        </div>
       <div class="passwordInput">
            <span>密码</span>
            <input v-model="password" type="password" placeholder="请输入密码">
            <div  @click="delInputValue">
                <img src="../../assets/images/cha.png" alt="">
            </div>
        </div>
        <div class="loginBtn" @click="loginBtn">
            登录
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            password:""
        }
    },
    methods: {
        delInputValue(){
            this.password = ""
        },
        loginBtn(){
            this.$http.get("/login/cellphone",{
                params:{
                    phone:this.$store.state.userName,
                    password:this.password
                }
            }).then(res=>{
                console.log(res);
                this.$store.commit("saveToken",res.data.bindings[0].userId)
                this.$router.push({
                    path:"/"
                })
                if(this.$store.state.isExperience){
                    this.$store.commit("saveIsExperience")
                }
            }).catch(err=>{
                this.$toast('密码错误');
                console.log("密码错误")
            })
        }
    }
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.password {
		padding: 0 vw(20);
		.head {
			padding: vw(20) 0;
			div {
				display: inline-block;
				width: vw(24);
				height: vw(24);
				font-size: 0;
				overflow: hidden;
				vertical-align: middle;
				img {
					width: 100%;
					display: block;
				}
			}
			span {
				font-size: vw(22);
				margin-left: vw(12);
				vertical-align: middle;
			}
		}
		.passwordInput {
			margin-top: vw(30);
			border-bottom: 1px solid #d9d9d9;
			padding: vw(12) 0;
			position: relative;
			span {
				display: inline-block;
				width: vw(40);
				font-size: vw(16);
			}
			input {
				border: none;
				margin-left: vw(10);
			}
			div {
				width: vw(20);
				height: vw(20);
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				font-size: 0;
				overflow: hidden;
				img {
					width: 100%;
					display: block;
				}
			}
		}
		.loginBtn {
			width: 100%;
			height: vw(40);
			background-color: #ff3a3a;
			margin-top: vw(40);
			border-radius: vw(20);
			font-weight: bold;
			text-align: center;
			line-height: vw(40);
			color: white;
			font-size: vw(20);
			letter-spacing: vw(3);
		}
	}
</style>